<template>
    <rx-dialog @handOk="handleSubmit" @cancel="cancel">

        <a-form :form="form">
            <a-tabs defaultActiveKey="baseInfo" >
                <a-tab-pane :tab="i18n('form.baseInfo','基本信息')" key="baseInfo" forceRender>
                    <a-form-item style="display:none">
                        <a-input v-decorator="['id']"/>
                        <a-input v-decorator="['bodefId']"/>
                    </a-form-item>
                    <a-row style="margin-top: 20px;">

                        <a-col :span="12">
                            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="boentI18n('form.name','名称')">
                                <a-input style="width: 80%;" @blur.native="getPinyinByName" :placeholder="boentI18n('form.name','名称','input')" v-decorator="['name', {rules: [{required: true, message: '请输入名称'}]}]"/>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item
                                :labelCol="labelCol" :wrapperCol="wrapperCol"
                                :label="boentI18n('form.alias','别名')"
                            >
                                <a-input style="width: 80%;" :placeholder="boentI18n('form.alias','别名','input')"
                                     v-decorator="['alias', {
                                         rules: [
                                             {required: true, message: boentI18n('form.alias','请输入别名','input')},
                                             {pattern:/^[a-zA-Z][a-zA-Z0-9_-]*$/,message:boentI18n('form.str','不能以数字开头,不能包含【_-】以外的特殊字符！','input')}
                                         ]}]"
                                />
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="12">
                            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="boentI18n('genModeMap.form','表单')">
                                <rx-input-button width="80%" @change="changeForm"  @click="selectForm" v-decorator="['form', {rules: [{required: true, message: boentI18n('genModeMap.form','请选择表单','input')}]}]"></rx-input-button>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('list.formulas','表间公式')">
                                <rx-input-button width="80%" v-decorator="['formulas']" @click="selectFormulas"></rx-input-button>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="12">
                            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="boentI18n('form.category','分类')">
                                <rx-category-select cat-key="FORM" :isGrant="true" v-if="isShowManageTree"
                                                    :isAdmin="isManageToTree" style="width: 80%;" v-decorator="['categoryId', {rules: [{required: true, message: boentI18n('form.category','请输入分类','input')}]}]"></rx-category-select>
                              <a-input v-else style="display:none;" v-decorator="['categoryId']" />
                            </a-form-item>
                        </a-col>

                        <a-col :span="12">
                            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.treeForm','树形表单')">
                                <rx-checkbox :false-value="0"
                                             :true-value="1"
                                             style="line-height: normal"
                                             @change="treeChange"
                                             v-model="isTree">
                                    {{i18n('list.support','支持')}}
                                </rx-checkbox>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row v-show="isTree==1" class="FormSolutionEdit">
                        <a-col :span="12">
                            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.loadMode','加载方式')">
                                <a-select style="width: 80%" :getPopupContainer='p=>p.parentNode'  allowClear v-decorator="['loadMode',{initialValue:0}]">
                                    <a-select-option :value="0">
                                        {{i18n('list.LoadAtOnce','一次性加载')}}
                                    </a-select-option>
                                    <a-select-option :value="1">
                                        {{i18n('list.LazyLoading','懒加载')}}
                                    </a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.displayFields','显示字段')">
                                <a-select style="width: 80%" :getPopupContainer='p=>p.parentNode' :options="mainFieldDatas" allowClear
                                          v-decorator="['displayFields']">
                                </a-select>
                            </a-form-item>
                        </a-col>
                    </a-row>


                    <a-row>

                        <a-col :span="12">
                            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('list.dataHandler','表单数据处理器')">
                                <a-input :placeholder="i18n('list.dataHandler','表单数据处理器')"
                                         style="width: 80%;"
                                         v-decorator="['dataHandler', {rules: [{required: false, message: i18n('list.dataHandler','请输入表单数据处理器','input')}]}]" :rows="4" />
                            </a-form-item>
                        </a-col>
                    </a-row>

                    <a-row>
                        <a-col :span="24">
                            <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol1" :label="i18n('form.def','流程定义')">
                                <a-button-group class="addbutton">
                                    <button @click="selectDef"><i class="iconfont iconadd"></i></button>
                                    <button @click="removeDefs"><i class="iconfont icontrash"></i></button>
                                    <button @click="moveDefUp"><i class="iconfont iconshang"></i></button>
                                    <button @click="moveDefDown"><i class="iconfont iconxia"></i></button>
                                </a-button-group>
                                <a-table
                                    :columns="defColumns"
                                    :dataSource="defs"
                                    :pagination="false"
                                    :bordered="true"
                                    :rowSelection="{selectedRowKeys: defSelectedRowKeys,type:'checkbox', onChange: onDefSelectChange}"
                                    rowKey="idx_"
                                    style="width: 91.5%;"
                                >
                                    <template slot="config" slot-scope="text,record,index">
                                        <span :style="{'color':getConfig(record.config)?'green':'red'}">{{getConfig(record.config)? i18n('list.configured','已配置'): i18n('list.notConfigured','未配置')}}</span>
                                        <a-button style="margin-left: 10px" @click="configDef(record)">
                                            {{$ti18('rxList.config','配置')}}
                                        </a-button>
                                    </template>
                                </a-table>
                            </a-form-item>
                        </a-col>
                    </a-row>


                    <a-row>
                        <a-col :span="24">
                            <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol1" :label="i18n('list.btnSet','按钮设置')">
                                <SolutionButtonDef :buttons="buttons" :form="form" :pkId="pkId" :boAttrs="boAttrs"></SolutionButtonDef>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="24">
                            <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol1" :label="i18n('list.noPriSet','无主键设置')">
                                <a-button-group class="addbutton">
                                    <button @click="addParams()"><i class="iconfont iconadd"></i></button>
                                    <button @click="removeParams()"><i class="iconfont icontrash"></i></button>
                                    <button @click="moveParamsUp()"><i class="iconfont iconshang"></i></button>
                                    <button @click="moveParamsDown()"><i class="iconfont iconxia"></i></button>
                                </a-button-group>

                                <a-table
                                    :columns="paramsColumns"
                                    :dataSource="params"
                                    :pagination="false"
                                    :bordered="true"
                                    :rowSelection="{selectedRowKeys: paramSelectedRowKeys,type:'checkbox', onChange: onParamSelectChange}"
                                    rowKey="idx_"
                                    style="width: 91.5%;"
                                >
                                    <template slot="name" slot-scope="text, record, index"  >
                                        <div style="height: 25px;" v-if="!record.edit.field"
                                             @click="record.edit.field=true">{{text}}</div>
                                        <a-select :options="boAttrs" :getPopupContainer='p=>p.parentNode' v-else v-model="record.name" @blur="record.edit.field=false" ></a-select>
                                    </template>

                                    <template slot="valueSource" slot-scope="text, record, index"  >
                                        <div style="height: 25px;" v-if="!record.edit.from"
                                             @click="record.edit.from=true">{{getSourceDisplay(text)}}</div>
                                        <a-select :options="sourceFrom" v-else v-model="record.valueSource" :getPopupContainer='p=>p.parentNode' @blur="record.edit.from=false" ></a-select>
                                    </template>

                                    <template slot="valueDef" slot-scope="text, record, index"  >
                                        <div style="height: 25px;" v-if="!record.edit.setting"
                                             @click="record.edit.setting=true">{{text}}</div>
                                        <template v-if="record.edit.setting">
                                            <a-input v-if="record.valueSource=='fixedVar'" v-model="record.valueDef" @blur="record.edit.setting=false" ></a-input>
                                            <rx-input-button v-else-if="record.valueSource=='script'" v-model="record.valueDef" width="80%" @click="setScript" @blur="record.edit.setting=false"></rx-input-button>
                                            <rx-constant v-else-if="record.valueSource=='constantVar'" v-model="record.valueDef" @blur="record.edit.setting=false"></rx-constant>
                                        </template>
                                    </template>
                                </a-table>
                            </a-form-item>
                        </a-col>
                    </a-row>

                </a-tab-pane>
                <a-tab-pane :tab="i18n('list.scriptSet','脚本配置')" key="script" forceRender>

                    <a-row>
                          <div style="height:600px;overflow: hidden;padding-right: 20px;margin-left: 20px;">
                            <rx-monaco-editor  ref="javaCode"
                                               v-model="mdl.javaCode"
                                               language="java"
                                              >

                                <template v-slot:monacoeditor>
                                  <rx-common-script @select="insertScript" use-to="formSolution" type="1">
                                    <template v-slot:button>
                                      <a-button type="primary" style="margin-left: 8px">
                                        {{i18n('list.insertScript','插入代码')}}
                                        <a-icon type="down" /> </a-button>
                                    </template>
                                  </rx-common-script>

                                  <a-button icon="edit" style="margin-left: 5px"  @click="showScriptDialog()">
                                      {{i18n('list.quickScript','快速脚本')}}
                                  </a-button>

                                  <a-button @click="selectDataSource" style="margin-left: 5px">
                                    {{i18n('list.selectDS','选择数据源')}}
                                  </a-button>

                                  <span style="margin-left: 5px">
                                      <rx-constant-field @select="insertConst"></rx-constant-field>
                                  </span>

                                  <a-dropdown>
                                      <a-menu slot="overlay" class="rx-dropdown">
                                          <template v-for="item in mainFieldDatas">
                                              <a-menu-item :key="item.value" @click="insertScript(item.value)" > {{item.label}} </a-menu-item>
                                          </template>
                                      </a-menu>
                                    <a-button >
                                      {{i18n('list.selectField','选择表单字段')}}
                                      <a-icon type="down" />
                                    </a-button>
                                  </a-dropdown>



                                </template>

                            </rx-monaco-editor>
                        </div>

                    </a-row>
                </a-tab-pane>
            </a-tabs>
        </a-form>

    </rx-dialog>
</template>
<script>
import FormBoAttrApi from '@/api/form/bo/formBoAttr.js'
import FormBoEntityApi from "@/api/form/bo/formBoEntity"
import FormSolutionApi from '@/api/form/core/formSolution'
import AppName from "@/assets/js/AppName.js";


import {BaseForm,
    JsConstant,CheckInput,
    GridMixin,
    Util,
    RxCheckbox,
    Dialog,
    RxCodemirror,
    RxConstant,RxMonacoEditor} from "@lowcode/jpaas-common-lib";


import DialogBox from "../../../../assets/js/DialogBox";

import FormSolutionDefMappingConfig from "./FormSolutionDefMappingConfig";
import SolutionButtonDef from "@/views/modules/form/core/formsolution/SolutionButtonDef";
import BpmDefApi from "@/api/bpm/core/bpmDef";

export default {
    name: 'FormSolutionEdit',
    components: {
        SolutionButtonDef,
        RxConstant,CheckInput,
        'rx-checkbox': RxCheckbox,
        RxCodemirror,RxMonacoEditor
    },
    mixins:[BaseForm,GridMixin,AppName],
    data(){
        return {
            state:true,
            isTree:0,
            mainFieldDatas:[],
            buttons:[],
            defColumns:[
                {
                    title: this.i18n('form.defName','流程定义名称'),
                    dataIndex:'defName'
                },
                {
                    title: this.i18n('form.version','版本号'),
                    dataIndex:'version'
                },
                {
                    title: this.i18n('form.config','条件配置'),
                    dataIndex: 'config',
                    scopedSlots: { customRender: 'config'}
                }
            ],

            paramsColumns:[{title: this.i18n('form.field','字段'),dataIndex: 'name',scopedSlots: { customRender: 'name' } },
                {title: this.i18n('form.valueSource','值来源'),dataIndex: 'valueSource',scopedSlots: { customRender: 'valueSource' }},
                {title: this.i18n('form.valueDef','设置'),dataIndex: 'valueDef',scopedSlots: { customRender: 'valueDef' }}
            ],
            sourceFrom:[
                {value:"param",label: this.i18n('form.param',"参数传入")},
                {value:"fixedVar",label: this.i18n('form.fixedVar',"固定值")},
                {value :"script", label : this.i18n('form.script','脚本')},
                {value :"constantVar",label : this.i18n('form.constVar','常量' )}],
            defs:[],

            params:[],
            //表单属性
            attrs:[],
            defSelectedRowKeys:[],
            defSelectedRows:[],

            paramSelectedRowKeys:[],
            paramSelectedRows:[],
            tableColumn:[
                {title: this.i18n('form.tab','表'),dataIndex: 'name', scopedSlots: { customRender: 'name' }},
                {title: this.i18n('form.tab','type'),dataIndex: 'type',scopedSlots: { customRender: 'type' }},
                {title: this.$ti18('rxList.config','配置'),dataIndex: 'setting', scopedSlots: { customRender: 'setting' }}
            ],
            tableRights:[],
            complexJson:{
                main: {
                    form: {text: "formName", value: "formId"},
                    formulas: {text: "formulasName", value: "formulas"},
                }
            },
            boAttrs:[],
            ScriptInsertAry:[],

        }
    },
    created(){
        this.isUserManager(this.$route.query.appId);

    },
    methods: {
        validator(rule, value, callback){
            debugger
        },
        i18n(name,text,key){
            return this.$ti18(name,text,"formSolution",key);
        },
        boentI18n(name,text,key){
            return this.$ti18(name,text,"formBoEntity",key);
        },
        showScriptDialog(){
            let self=this;
            let config={curVm:this};
            Dialog.openScriptDialog(config,function (script){
                self.$refs.javaCode.insertContent(script);
            })
        },
        insertScript(script){
            this.$refs.javaCode.insertContent(script);
        },
        get(id){
            return FormSolutionApi.get(id);
        },
        save(values,vm){
            if(!Util.hasChineseAndSpecialChars(values.alias)){
                this.$message.warning('标识中不能包含中文以及特殊字符~');
                vm.loading = false;
                return;
            }
            values.noPkSetting = JSON.stringify(this.params);
            values.tree=this.isTree;
            values.javaCode=this.$refs.javaCode.value;
            if(!values.formulas){
                values.formulasName="";
            }
            let appId=this.curApp.appId;
            if(appId ){
                values.appId=appId;
            }
            /*触发更新在表单设计的弹窗刷新*/
            return new Promise(async (resolve,reject)=>{
                let res = await FormSolutionApi.save(values) ;
                if(res){
                    this.$broadCast && this.$broadCast.postMessage('formDesign')
                    resolve(res)
                }
                reject(res)
            });
        },
        async onload_(obj){
            if(!this.pkId){

            }
            else{
                this.buttons=JSON.parse(obj.buttonsSetting || '[]');
                this.defs=JSON.parse(obj.flowDefMapping || '[]');
                for (var i=0;i<this.defs.length;i++) {
                  let def = this.defs[i];
                  if (def.version){
                    continue;
                  }
                  let res = await BpmDefApi.get(def.defId);
                  this.$set(def, 'version', res.data.version);
                }
                this.isTree=obj.tree;
                if(obj.bodefId){
                    this.initField(obj.bodefId);
                }
                if(obj.formId){
                    this.getByFormId(obj.formId);
                }
                if(obj.noPkSetting){
                    this.params=JSON.parse(obj.noPkSetting || '[]');
                }
                var javaCode=obj.javaCode ||"";
                obj.javaCode= javaCode;

            }
        },
        treeChange(val){
            this.isTree=val;
        },
        initField(boDefId){
            FormBoEntityApi.getFieldByBoDefId(boDefId, '_main').then(data => {
                this.mainFieldDatas=data.map(item => {
                    return {label: item.comment, value: item.name}
                });
            })
        },

        getByFormId(formId){
            FormBoAttrApi.getByFormId(formId).then(res=>{
                var ary=[];
                for(var i=0;i<res.length;i++){
                    var o=res[i];
                    var newObj = {};
                    newObj.value = o.name;
                    newObj.fieldName = o.fieldName;
                    newObj.label = o.comment;
                    ary.push(newObj);
                }
                this.boAttrs=ary;
            })
        },
        addParams() {
            this.params.push({
                name: "",
                valueSource: "",
                valueDef: "",
                idx_: Util.randomId(),
                edit: {field: false, from: false, setting: false,}
            })
        },
        changeForm(val){
            if(!val){
                this.form.setFieldsValue({bodefId: null});
            }
        },
        selectForm(vm) {
            var self = this;
            var config = {curVm: this, widthHeight: ['1100px', '650px'],data:{multiSelect:false}};
            DialogBox.openForm(config, function (data) {
                if(data){
                    vm.setVal(data.id, data.name);
                    if(data.bodefId){
                        self.form.setFieldsValue({bodefId: data.bodefId});
                        self.initField(data.bodefId);
                    }
                    //已经存在值时，不需要再复制值
                    if(!self.form.getFieldValue('name')
                        &&  !self.form.getFieldValue('alias')){
                        var mdl = Object.assign(self.form.getFieldsValue(), {
                            name: data.name,
                            alias: data.alias
                        });
                        self.form.setFieldsValue(mdl);
                    }
                }
            })
        },
        selectDef(){
            var self_=this;
            var config = {curVm: this, widthHeight:['950px','700px'],  data: {single:true}};
            Dialog.openBpmDefDialog(config,function (data) {
                if(data){
                    self_.defs.push({idx_:Util.randomId(),defId:data.defId,defName:data.name,version:data.version,config:'{}'});
                }
            })
        },
        onDefSelectChange(selectedRowKeys, selectedRows) {
            this.defSelectedRowKeys = selectedRowKeys;
            this.defSelectedRows = selectedRows
        },
        removeDefs() {
            var self_=this;
            this.$confirm({
                title: this.$ti18('rxMsa.actionTips','操作提示'),
                zIndex: 20000,
                content: this.$ti18('rxMsa.delInfo','您确定需要删除选中的记录吗？'),
                okText: this.$ti18('rxForm.ackBtn','确认'),
                cancelText: this.$ti18('rxForm.cancelBtn','取消'),
                onOk() {
                    self_.removeRows(self_.defs, self_.defSelectedRowKeys);
                },
                onCancel() {
                }
            })
        },
        moveDefUp() {
            this.toUp(this.defs, this.defSelectedRowKeys)
        },
        moveDefDown(){
            this.toDown(this.defs,this.defSelectedRowKeys)
        },
        configDef(row){
            var boDefId = this.form.getFieldValue("bodefId");
            if(!boDefId){
                this.$message.error(this.i18n('msg.selFormMsg',"请先选择表单！"));
                return;
            }
            var conf= {
                curVm:this,
                data:{config:row.config,boDefId:boDefId},
                max:true,
                component:FormSolutionDefMappingConfig,
                title: this.i18n('list.bpmConfig',"流程定义配置")
            };
            Util.open(conf,function(action,data){
                if(action!='ok')return;
                row.config=data;
            })
        },
        selectFormulas(vm) {
            var boDefId = this.form.getFieldValue("bodefId");
            var config = {curVm: this, widthHeight: ['800px', '600px'], data: {boDefId: boDefId}};
            Dialog.openFormFormulasDialog(config, function (self, data) {
                var ids = "", names = "";
                for (var i = 0; i < data.length; i++) {
                    ids += data[i].id + ",";
                    names += data[i].name + ",";
                }
                ids = ids.substring(0, ids.lastIndexOf(","));
                names = names.substring(0, names.lastIndexOf(","));
                vm.setVal(ids, names)
            })
        },
        removeParams(){
            var self_=this;
            this.$confirm({
                title: this.$ti18('rxMsa.actionTips','操作提示'),
                zIndex: 20000,
                content: this.$ti18('rxMsa.delInfo','您确定需要删除选中的记录吗？'),
                okText: this.$ti18('rxForm.ackBtn','确认'),
                cancelText: this.$ti18('rxForm.cancelBtn','取消'),
                onOk() {
                    self_.removeRows(self_.params,self_.paramSelectedRowKeys);
                },
                onCancel() {
                }
            })

        },
        onParamSelectChange(selectedRowKeys, selectedRows){
            this.paramSelectedRowKeys = selectedRowKeys;
            this.paramSelectedRows = selectedRows
        },
        moveParamsUp(){
            this.toUp(this.params,this.paramSelectedRowKeys)
        },
        moveParamsDown(){
            this.toDown(this.params,this.paramSelectedRowKeys)
        },
        handFieldChange(values){
            if( Util.hasOwn(values,"javaCode")){
                Object.assign(this.mdl,values);
                return;
            }
            if( Util.hasOwn(values,"form")){
                this.handForm(values);
                return;
            }
        },
        handForm(values){
            var str=values.form;
            if(!str){
                return;
            }
            var json=JSON.parse(str);
            var formId=json.value;
            this.getByFormId(formId);
        },
        getSourceDisplay(val){
            for(var i=0;i<this.sourceFrom.length;i++){
                var o=this.sourceFrom[i];
                if(o.value==val){
                    return o.label;
                }
            }
            return "";
        },
        setScript(btnVm){
            var obj=btnVm.getVal();
            var config={curVm:this,
                widthHeight:['600px','400px'],
                data:{script:obj.value}
            };
            Dialog.openScripttextDialog(config,function (vm,script) {
                btnVm.setVal(script,"已设置")
            })
        },
        validForm(obj){
            obj.buttonsSetting=JSON.stringify(this.buttons);
            obj.flowDefMapping=JSON.stringify(this.defs);
            return true;
        },
        selectDataSource(){
            let self_=this;
            Dialog.openDataSourceDialog({
                curVm: this, widthHeight: ['1200px', '600px'],
                data:{appName:this.serviceName}
            }, function (self, data) {
                self_.insertScript('"'+data.alias+'"');
            })
        },
        insertConst(val){
          this.$refs.javaCode.insertContent(val);
        },
        getPinyinByName(){
            let name=this.form.getFieldsValue().name
            if (!name){
                return;
            }
            if (this.form && this.form.getFieldsValue().alias){
                return;
            }
            this.getPinyin(name).then(res => {
                //去除不可见的特殊符号
                if(res){
                    res=res.replace(/\u200B/g,'');
                }
                this.form.setFieldsValue({alias:res})
            })
        },
        getConfig(config){
            if(!config || config=='{}'){
                return false
            }
            let val = JSON.parse(config)
            if(val.mode=="easy"){
                return  val.easyCondition.rules.length==0? false:true;
            }else if(val.mode=="hard"){
                return val.javaCode? true:false
            }
            return false
        },

    },
    watch:{

    }
}
</script>
<style lang="less">
.rx-dropdown{
    max-height: 400px;
    overflow-y: auto;
    display: block;
}
//关闭下拉选择打开动画
.FormSolutionEdit{
    //.ant-select-dropdown.slide-up-appear.slide-up-appear-active.ant-select-dropdown-placement-bottomLeft, .ant-select-dropdown.slide-up-enter.slide-up-enter-active.ant-select-dropdown-placement-bottomLeft {
    //    -webkit-animation-name: unset;
    //    animation-name: unset;
    //    -webkit-animation-duration: .05s;
    //    animation-duration: .05s;
    //}
    //
    //.ant-select-dropdown.slide-up-appear.slide-up-appear-active.ant-select-dropdown-placement-topLeft, .ant-select-dropdown.slide-up-enter.slide-up-enter-active.ant-select-dropdown-placement-topLeft {
    //    -webkit-animation-name: unset;
    //    animation-name: unset;
    //    -webkit-animation-duration: .05s;
    //    animation-duration: .05s;
    //}
    //
    //.ant-select-dropdown.slide-up-leave.slide-up-leave-active.ant-select-dropdown-placement-bottomLeft {
    //    -webkit-animation-name: unset;
    //    animation-name: unset;
    //    -webkit-animation-duration: .05s;
    //    animation-duration: .05s;
    //}
    //
    //.ant-select-dropdown.slide-up-leave.slide-up-leave-active.ant-select-dropdown-placement-topLeft {
    //    -webkit-animation-name: unset;
    //    animation-name: unset;
    //    -webkit-animation-duration: .05s;
    //    animation-duration: .05s;
    //}
}
</style>